<template>
  <div id="check_course">
    <div class="logo_header">
      <LogoHeader />
    </div>
    <div class="infos_header">
      <InfosHeader />
    </div>
    <div id="check_header">
      <h1>学生课程</h1>

      <router-link to="/st_select_course" class="select_button">
        <el-button>加入课程</el-button>
      </router-link>
    </div>

    <div id="main">
      <div v-if="display_hide">
        <ul>
          <li class="info" v-for="(info, index) in infos" :key="index">
            <el-main>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <h2>{{ info.co_name }}</h2>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    授课教师
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple-light">
                    {{ info.te_name }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">班级名称：</div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    {{ info.cl_name }}
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">上课时间：</div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    {{ info.cl_time }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    学年
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_year }}
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    学期
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_term }}
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    学时
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_hour }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    课程介绍
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_information }}
                  </div>
                </el-col>
              </el-row>
              <div class="course_button">
                <el-button
                  size="small"
                  @click="delectForm(info.co_id, info.cl_id)"
                  >删除</el-button
                >
                <router-link to="/st_home">
                  <el-button
                    type="primary"
                    size="small"
                    @click="sendData(info.co_id, info.cl_id)"
                    >查看</el-button
                  >
                </router-link>
              </div>
            </el-main>
          </li>
        </ul>
      </div>
      <div v-else>
        <el-empty description="没有正在进行的课程，请选课！"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import LogoHeader from "../components/logo.vue";
import InfosHeader from "../components/infos_header.vue";
export default {
  inject: ["reload"],
  name: "st_check_course",
  components: {
    LogoHeader,
    InfosHeader,
  },
  data() {
    return {
      display_hide: true,
      size: "",
      infos: {
        co_id: "",
        co_name: "",
        co_term: "",
        co_year: "",
        co_hour: "",
        co_information: "",
        te_name: "",
      },
    };
  },
  methods: {
    loadStudentData() {
      this.axios
        .get(
          "http://10.197.43.62:8088/student/student_course?st_id=" + this.st_id
        )
        .then((res) => {
          console.log("学生已选课程列表");
          console.log(res.data);
          if (res.data != "") {
            this.display_hide = true;
            this.infos = res.data;
          } else {
            this.display_hide = false;
          }
        });
    },
    sendData(co_id, cl_id) {
      localStorage.setItem("co_id", co_id);
      this.$store.dispatch("SET_CO_ID", co_id);
      localStorage.setItem("cl_id", cl_id);
      this.$store.dispatch("SET_CL_ID", cl_id);
    },
    delectForm(co_id, cl_id) {
      this.$confirm("确定删除该课程?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get(
              "http://10.197.43.62:8088/student/delcourse?cl_id=" +
                cl_id +
                "&co_id=" +
                co_id +
                "&st_id=" +
                this.st_id
            )
            .then((res) => {
              console.log(res.data);
              if (res.data.data === 1) {
                this.$message({
                  message: "恭喜你，删除成功",
                  type: "success",
                });

                this.reload();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.loadStudentData();
  },
  computed: {
    st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}

/*  */
#check_course {
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  position: absolute;
}

/*check_header  */
#check_header {
  padding: 30px 350px;
}

h1 {
  text-align: center;
  font-size: 40px;
}
.select_button {
  display: block;
  margin-left: 900px;
  font-size: 20px;
}

/*  */
#main {
  padding: 0 320px;
}

h2 {
  text-align: center;
  font-size: 20px;
  color: #000;
}

.course_button {
  margin-top: 20px;
  float: right;
}
</style>
<style>
#check_course > #main .el-main {
  margin-bottom: 20px;
  background-color: #ecf5ff8f;
}

#check_course > #main .el-col {
  border: 1px solid #ebeef5;
  background: #fafafa;
  height: 70px;
}

#check_course > #main .grid-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#check_course > #main .bg-purple {
  color: #909399;
}
#check_course > #main .el-empty {
  background-color: #fff;
}
</style>